<template>
	<view class="wallet-page">
		<!-- 钱包头部 -->
		<view class="wallet-header">
			<text class="balance-label">账户余额</text>
			<text class="balance-amount">¥1,234.56</text>
		</view>

		<!-- 操作按钮 -->
		<view class="action-grid">
			<view class="action-button" @click="handleAction('recharge')">
				<uni-icons type="plus-filled" size="24" color="#ff5a5f"></uni-icons>
				<text class="action-label">充值</text>
			</view>
			<view class="action-button" @click="handleAction('withdraw')">
				<uni-icons type="minus-filled" size="24" color="#ff5a5f"></uni-icons>
				<text class="action-label">提现</text>
			</view>
		</view>

		<!-- 交易记录 -->
		<view class="transaction-list">
			<view class="list-header">
				<text class="list-title">交易记录</text>
				<text class="view-all" @click="viewAllTransactions">查看全部 ></text>
			</view>

			<view class="transaction-item" v-for="transaction in transactions" :key="transaction.id">
				<view class="transaction-info">
					<text class="transaction-title">{{transaction.title}}</text>
					<text class="transaction-time">{{transaction.time}}</text>
				</view>
				<text :class="['transaction-amount', transaction.type === 'plus' ? 'amount-plus' : 'amount-minus']">
					{{transaction.type === 'plus' ? '+' : '-'}}¥{{transaction.amount}}
				</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'

	// 交易记录数据
	const transactions = ref([
		{
			id: 1,
			title: '充值',
			time: '2023-08-15 14:30',
			amount: '500.00',
			type: 'plus'
		},
		{
			id: 2,
			title: '商品购买',
			time: '2023-08-14 10:25',
			amount: '128.00',
			type: 'minus'
		},
		{
			id: 3,
			title: '佣金收入',
			time: '2023-08-13 16:45',
			amount: '45.60',
			type: 'plus'
		}
	])

	// 处理充值/提现操作
	const handleAction = (type) => {
		uni.navigateTo({
			url: `/subpackage_user/user/wallet/${type}`
		})
	}

	// 查看全部交易记录
	const viewAllTransactions = () => {
		uni.navigateTo({
			url: '/subpackage_user/user/wallet/transactions'
		})
	}
</script>

<style lang="scss" scoped>
	.wallet-page {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.wallet-header {
		background: linear-gradient(135deg, #ff5a5f, #ff3f4b);
		color: white;
		padding: 60px 20px 25px;
		text-align: center;

		.balance-label {
			display: block;
			font-size: 14px;
			opacity: 0.9;
			margin-bottom: 10px;
		}

		.balance-amount {
			display: block;
			font-size: 32px;
			font-weight: bold;
		}
	}

	.action-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		padding: 15px;

		.action-button {
			background-color: #fff;
			border-radius: 8px;
			padding: 15px;
			text-align: center;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

			.action-label {
				display: block;
				font-size: 14px;
				color: #333;
				margin-top: 8px;
			}
		}
	}

	.transaction-list {
		margin-top: 20px;
		padding: 0 15px;

		.list-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			padding: 0 5px;

			.list-title {
				font-size: 16px;
				font-weight: bold;
				color: #333;
			}

			.view-all {
				font-size: 12px;
				color: #ff5a5f;
			}
		}

		.transaction-item {
			background-color: #fff;
			border-radius: 8px;
			padding: 12px;
			margin-bottom: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

			.transaction-info {
				flex: 1;

				.transaction-title {
					display: block;
					font-size: 14px;
					color: #333;
					margin-bottom: 4px;
				}

				.transaction-time {
					display: block;
					font-size: 12px;
					color: #999;
				}
			}

			.transaction-amount {
				font-size: 16px;
				font-weight: bold;

				&.amount-plus {
					color: #4caf50;
				}

				&.amount-minus {
					color: #f44336;
				}
			}
		}
	}
</style>